Ext.define('DutyList.calendar.form.GroupsWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.groupwindow',

    requires: [
        'DutyList.calendar.view.UsersGrid',
        'Ext.panel.Panel',
        'Ext.form.field.ComboBox'
    ],

    constructor: function(config) {
        var formPanelCfg = {
            xtype: 'form',
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 70
            },
            frame: false,
            bodyStyle: 'background:transparent;padding:5px 10px 10px;',
            bodyBorder: false,
            border: false,
            layout: 'vbox',
            items: [
                {
                itemId: 'groupName',
                //name: DutyList.calendar.data.UserMappings.Name.name,
                fieldLabel: 'Group',
                xtype: 'textfield',
                anchor: '100%'
            }
                /*,{
                    xtype: 'combobox',
                    itemId: 'groupName',
                    id: 'groupName',
                    anchor: '100%',
                    fieldLabel: 'Group',
                    displayField: 'group',
                    width: 300,
                    labelWidth: 70,
                    store: Ext.getCmp('gridPanel').store,
                    queryMode: 'local',
                    typeAhead: true
                } */
            ]
        };

        this.callParent([Ext.apply({
                titleTextAdd: 'Add Group',
                titleTextEdit: 'Edit Group',
                titleTextRemove: 'Remove Group',
                width: 400,
                autocreate: true,
                border: true,
                closeAction: 'hide',
                modal: false,
                resizable: true,
                buttonAlign: 'left',
                layout: 'fit',

                fbar: [
                    '->',
                    {
                        text: 'Save',
                        disabled: false,
                        handler: this.onSave,
                        scope: this
                    },
                    {
                        text: 'Cancel',
                        disabled: false,
                        handler: this.onCancel,
                        scope: this
                    }],
                items: formPanelCfg
            },
            config)]);
    },

    // private
    newId: 10000,

    // private
    initComponent: function() {
        this.callParent();

        this.formPanel = this.items.items[0];

        this.addEvents({
            /**
             * @event eventadd
             * Fires after a new event is added
             * @param {DutyList.calendar.form.EventWindow} this
             * @param {DutyList.calendar.EventRecord} rec The new {@link DutyList.calendar.EventRecord record} that was added
             */
            groupadd: true,


            addGroup: true,
            /**
             * @event eventupdate
             * Fires after an existing event is updated
             * @param {DutyList.calendar.form.EventWindow} this
             * @param {DutyList.calendar.EventRecord} rec The new {@link DutyList.calendar.EventRecord record} that was updated
             */
            eventupdate: true,
            /**
             * @event eventdelete
             * Fires after an event is deleted
             * @param {DutyList.calendar.form.EventWindow} this
             * @param {DutyList.calendar.EventRecord} rec The new {@link DutyList.calendar.EventRecord record} that was deleted
             */
            eventdelete: true,
            /**
             * @event eventcancel
             * Fires after an event add/edit operation is canceled by the user and no store update took place
             * @param {DutyList.calendar.form.EventWindow} this
             * @param {DutyList.calendar.EventRecord} rec The new {@link DutyList.calendar.EventRecord record} that was canceled
             */
            eventcancel: true
        });
    },

    // private
    afterRender: function() {
        this.callParent();

        this.el.addCls('ext-cal-event-win');

        this.titleField = this.down('#groupName');

        this.titleField.isValid = function() {
            var valid = this.getValue().length > 0;
            if (!valid) {
                this.focus();
            }
            return valid;
        };
    },

    /**
     * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
     * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form
     * for an existing event in edit mode, or a plain object containing a StartDate property (and
     * optionally an EndDate property) for showing the form in add mode.
     * @param {String/Element} animateTarget (optional) The target element or id from which the window should
     * animate while opening (defaults to null with no animation)
     * @return {Ext.Window} this
     */


    // private
    onCancel: function() {
        this.cleanup(true);
        this.fireEvent('eventcancel', this);
    },

    // private
    cleanup: function(hide) {
        if (this.activeRecord && this.activeRecord.dirty) {
            this.activeRecord.reject();
        }
        delete this.activeRecord;

        if (hide === true) {
            // Work around the CSS day cell height hack needed for initial render in IE8/strict:
            //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget;
            this.hide();
        }
    },

    // private
    updateRecord: function(record, keepEditing) {
        var fields = record.fields,
            values = this.formPanel.getForm().getValues(),
            name,
            M = DutyList.calendar.data.UserMappings,
            obj = {};

        fields.each(function(f) {
            name = f.name;
            if (name in values) {
                obj[name] = values[name];
            }
        });

        //var dates = this.dateRangeField.getDT();
        var dates = this.dateRangeField.getValue();
        obj[M.Date.name] = dates[0];
        obj[M.Night.name] = dates[1];

        record.beginEdit();
        record.set(obj);

        if (!keepEditing) {
            record.endEdit();
        }

        return this;
    },

    // private
    onSave: function(){

         if(!this.formPanel.form.isValid()){
         return;
         }

        groupname = Ext.getCmp('groupTitle').lastValue;
        console.log(groupname);
        //grid=  Ext.getCmp('gridPanel');
        //console.log(grid);
        //grid.store.add({group: groupname,cnt: 0,active: true});
        //this.onCancel();
        /*
        if(!this.updateRecord(this.activeRecord)){
            this.onCancel();
            return;
        }  */
        this.fireEvent(this.activeRecord.phantom ? 'eventadd' : 'eventupdate', this, this.activeRecord, this.animateTarget);

         //Clear phantom and modified states.
        this.activeRecord.commit();
    },

    // private
    onDelete: function(){
        this.fireEvent('eventdelete', this, this.activeRecord, this.animateTarget);
    }
});
